<template>
  <div>
    <Header></Header>
    <div class="block">
      <el-timeline>

        <!--循环从多个blogs中取出一个进行显示-->
        <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" v-bind:key="blog.id">
          <el-card>
            <h4>
              <!--为标题添加路由-->
              <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
                {{blog.title}}
              </router-link>
            </h4>
            <p>{{blog.description}}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>

      <el-pagination
        class="mpage"
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="page">
      </el-pagination>
    </div>

  </div>
</template>

<script>
    //导入Header页面
    import Header from '../components/Header'
    export default {
        name: "Blogs",
        data(){
          return {
            blogs: {},
            currentPage: 1,
            total: 0,
            pageSize: 5
          }
        },
        components: {
          //将Header页面注册为组件
          Header: Header
        },
        methods: {
          page(currentPage) {
            this.$axios.get("/blogs?currentPage=" + currentPage).then(result => {
              console.log(result);
              //response中的blogs对象的属性都存储在records下，records与其它页相关数据同级
              this.blogs = result.data.data.records;
              this.currentPage = result.data.data.current;
              this.total = result.data.data.total;
              this.pageSize = result.data.data.size;
            });
          }
        },
        //Vue实例创建好时就调用page方法，默认展示第一页博客，在后续点击页码时也会调用page方法获取某一页的所有博客
        created() {
          this.page(1);
        }
    }
</script>

<style>
  .mpage {
    margin: 0 auto;
    text-align: center;
  }
</style>
